<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>个人中心</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<style type="text/css">
		body {
			background: #F0F1F2;
		}

		.wraper .item {
			background: #ffffff;
			padding: 0.2rem 0.15rem;
			margin-bottom: 0.1rem;
		}

		.wraper .item .top-name {
			font-size: 0.15rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(77, 77, 77, 1);
			line-height: 0.21rem;
			margin-bottom: 0.1rem;
		}

		.wraper .item .bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.wraper .item .bottom .left {
			font-size: 0.15rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(77, 77, 77, 1);
			line-height: 0.21rem;
		}

		.wraper .item .bottom .right img {
			width: 0.22rem;
			height: 0.22rem;
		}

		.wraper .item .bottom .right .edit {
			margin-right: 0.2rem;
		}

		.add-btn {
			width: 3.45rem;
			height: 0.46rem;
			background: rgba(0, 90, 147, 1);
			border-radius: 0.06rem;
			font-size: 0.13rem;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 0.18rem;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0.2rem;
			left: 0.15rem;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<div class="wraper">
			<!-- 生日列表 -->
			<div class="item" v-for="(vo,index) in birthdayList" :key="index">
				<div class="top-name" v-text="vo.realname"></div>
				<div class="bottom">
					<div class="left" v-text="'生日：' + vo.birthday"></div>
					<div class="right">
						<img src="../../image/icons/birthday-edit.png" class="edit" alt  @click="editbirthday(vo)" />
						<img  @click="deleteBirthday(vo.id)" src="../../image/icons/birthday-delete.png" class="delete" alt/>
					</div>
				</div>
			</div>
			<!-- end -->

				<!-- 缺省页面 -->
				<div class="aui-text-center"  v-if="birthdayList.length < 1" style="margin-top: 1.04rem;" tapmode >
					<img src="../../image/bg/bg-nonecar.png" style="width:1.51rem;margin-left:50%;transform:translateX(-50%);" />
					<div style="font-size:0.14rem;font-family:PingFangSC-Regular;font-weight:400;color:#B3B3B3;margin-top:0.27rem;width:100%; text-align: center;">
					   暂无数据
					</div>
				</div>

			<!-- 添加按钮 -->
			<div class="add-btn" @click="open_win('my_birthdaytip_add', './my_birthdaytip_add.html', false)">添加长辈生日</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			birthdayList: []
		},

		methods: {
			
			deleteBirthday: function(id) {
				var dialogBox = api.require('dialogBox');
				dialogBox.alert({
					texts: {
						title: '删除后不可恢复',
						content: '是否确认删除长辈生日？',
						leftBtnTitle: '取消',
						rightBtnTitle: '确认'
					},
					styles: {
						bg: '#fff',
						w: 295,
						corner: 10,
						title: {
							marginT: 17,
							titleSize: 17,
							titleColor: '#444444'
						},
						content: {
							marginT: 18,
							marginB: 30,
							color: '#444444',
							size: 17
						},
						left: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							// bg: 'widget://image/ico/ico_btn_left_bg.png',
							bg: "#fff",
							color: '#999999',
							size: 16
						},
						right: {
							marginB: 0,
							marginL: 0,
							w: 147.5,
							h: 55,
							corner: 10,
							bg: '#fff',
							color: '#005A93',
							size: 16
						},
						horizontalLine: {
							color: '#EEEEEE',
							height: 1
						},
						verticalLine: {
							color: '#EEEEEE', //（可选项）字符串类型；左右按钮中间竖线的颜色，支持rgb、rgba、#；默认：'rgba(245,245,245,0)'
							width: 1 //（可选项）数字类型；左右边按钮竖线的高度；默认：0
						}
					}
				}, function(ret) {
					if (ret.eventType == 'left') {
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					} else if (ret.eventType == 'right') {
						get_data('api/User/delUserFamily', {
							token: $api.getStorage('token'),
							id: id
						}, function(ret) {
							if (ret.status) {
								toast('删除成功！')
								send_event('logined');
								vm.get_info();
								// api.refreshHeaderLoading();
							}
						})
						var dialogBox = api.require('dialogBox');
						dialogBox.close({
							dialogName: 'alert'
						});
					}
				});
			},
			editbirthday(vo){
				$api.setStorage('dataStr',vo)
				send_event("my_birthday",{
					data:vo
				})
				open_win('my_birthdaytip_change', './my_birthdaytip_change.html', false)
			},
			get_info: function() {
				get_data('api/User/birthdayList', {
					token: $api.getStorage('token')
				}, function(ret) {
					if (ret.status) {
						vm.birthdayList = ret.data.user_family;
						
					}
				})
			},
		}
	})

	apiready = function() {
		add_event('my_birthdayip_add',function(ret){
			vm.get_info();
		})
		add_event('my_birthdaytip_change', function(ret) {
			vm.get_info();
			})
		vm.get_info();
	};
</script>

</html>
